<template>
  <div class="user">
    <page-search :searchConfig="searchConfig" @startSearch="handleSearch" />
    <page-content
      :tableConfig="tableConfig"
      ref="pageContentRef"
      pageName="users"
      title="用户"
      @newBtnClickEvent="handleNewBtnClick"
      @editBtnEventClick="handleEditBtnClick"
    />
    <page-model
      ref="pageModelRef"
      :modelConfig="modelConfigRef"
      :defalultInfo="pageModelInfo"
      pageName="users"
    ></page-model>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { useStore } from 'vuex'

import { searchConfig } from './config/search.config'
import { tableConfig } from './config/content.config'
import { modelConfig } from './config/model.config'

import { usePageContent } from '@/hooks/use-page-content'
import { usePageModel } from '@/hooks/use-page-model'
export default defineComponent({
  setup() {
    const [pageContentRef, handleSearch] = usePageContent()

    // pageModal相关的hook逻辑
    // 1.处理密码的逻辑
    const newBtnClickCallback = () => {
      const passwordItem = modelConfig.formItems.find(
        (item) => item.field === 'password'
      )
      passwordItem!.isHidden = false

      console.log('新增后的modelConfigRef数据是', modelConfigRef.value)
    }

    const editBtnClickCallback = () => {
      const passwordItem = modelConfig.formItems.find(
        (item) => item.field === 'password'
      )
      passwordItem!.isHidden = true
      console.log('编辑后的modelConfigRef数据是', modelConfigRef.value)
    }

    //2:动态添加部门和角色列表
    const modelConfigRef = computed(() => {
      const store = useStore()
      //2.1:处理部门
      const departmentItem = modelConfig.formItems.find(
        (item) => item.field == 'departmentId'
      )
      departmentItem!.options = store.state.allDeparmentsList.map(
        (item: any) => {
          return {
            title: item.name,
            value: item.id,
            id: item.id
          }
        }
      )
      //2.2角色
      const roleItem = modelConfig.formItems.find(
        (item) => item.field == 'roleId'
      )
      roleItem!.options = store.state.allRolesList.map((item: any) => {
        return {
          title: item.name,
          value: item.id,
          id: item.id
        }
      })

      return modelConfig
    })

    //3:从pagemodel hook导入公共函数
    const [pageModelInfo, pageModelRef, handleEditBtnClick, handleNewBtnClick] =
      usePageModel(newBtnClickCallback, editBtnClickCallback)

    return {
      searchConfig,
      tableConfig,
      modelConfigRef,
      pageContentRef,
      pageModelRef,
      modelConfig,
      pageModelInfo,
      handleSearch,
      handleNewBtnClick,
      handleEditBtnClick
    }
  }
})
</script>

<style scoped lang="less"></style>
